import { Suspense, lazy } from "react";
/**
 * lazy就是懒加载函数
 * Suspense 组件：当路由组件没有加载成功的时候，可以显示一个加载中的临时界面
 */
import Home from "../pages/Home";
import { Navigate } from "react-router-dom";

const About = lazy(() => import('../pages/About'))
const Description = lazy(() => import('../pages/Description'))
const Message = lazy(() => import('../pages/Message'))
const News = lazy(() => import('../pages/News'))
const TestQuery = lazy(() => import('../pages/TestQuery'))
const TestState = lazy(() => import('../pages/TestState'))

function load(Com) {
    return <Suspense fallback={<div>loading.....</div>}>
        <Com />
    </Suspense>
}

export default [
    {
        path: '/about',
        element: load(About)
    },
    {
        path: '/home',
        element: <Home />,
        children: [
            {
                path: 'message',
                element:load(Message),
                children: [
                    {
                        path: 'description/:id/:title',
                        element: load(Description)
                    },
                    {
                        path: 'query',
                        element: load(TestQuery)
                    },
                    {
                        path: 'testState',
                        element: load(TestState)
                    }
                ]
            },
            {
                path: 'news',
                element: load(News)
            },
            // 二级路由配置重定向
            {
                index: true,
                element: <Navigate to='news' />
            }
        ]
    },
    {
        index: true,
        element: <Navigate to="/home" />
    }
]